<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- v -->
    <div id="app">
      问题： 将msg反向输出到页面中
      <hr />
      {{ msg.split('').reverse().join('') }}
      <hr />

      计算属性直接使用
      <hr />
      {{ reverseMsg}}
    </div>
  </body>
  <script src="../../lib/vue.global.js"></script>
  <script>
    // vm
    /* 
    理解： 正常来说 逻辑我们最好放到VM中，但是现在上面的案例，把逻辑【复杂】放到了v,这有点不太合适【不符合关注点分离】，所以我们得把逻辑放到vm中
    问题： 怎么处理？
    解决： vue提供了一个解决方式：  计算属性  computed  表示对数据的格式化操作
  
  */
    const vm = Vue.createApp({
      data() {
        // M
        return {
          msg: "hello Vue333333333333",
        };
      },
      // 使用一个叫做computed的选项来表示操作
      computed: {
        reverseMsg() {
          return this.msg.split("").reverse().join("");
        },
      },
    }).mount("#app");
  </script>
</html>
